<template>
	<view class="container">
		<view class="bigBox" v-if="!selectTypeShow">
			<view class="top-bg">
				<image src="/static/icon/scan_pic.png" mode="widthFix"></image>
			</view>
			<view class=" desc">

				<image src="/static/icon/scan_1.png" mode="widthFix"></image>

				<view class="">
					<view class="">
						扫描终端背面的TUSN
					</view>
					<view class="">
						将条形码放入识别框中
					</view>
				</view>
			</view>
			<view class="row">

				<view class="label">店铺名</view>
				<picker @change="bindPickerChange" mode="selector" :value="index" :range="array"
					:range-key="`merSubName`">
					<view class="right">
						{{shopName}}
						<image class="ico-arrow-right"
							src="https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/ico-arrow-right.png"
							mode="widthFix">
						</image>
					</view>
				</picker>


			</view>
			<view class="machineryBox">
				<view class="machineryLeft">

					<input placeholder-style="color:rgb(215, 215, 215);font-size: 26rpx;" focus placeholder="请扫描设备SN"
						v-model="params.sn" class="title" />
				</view>
				<view class="machineryRight" @click="uploadImage()">
					<image src="../../static/icon/scan_2.png"></image>
				</view>
			</view>

			<view class="btnBox">
				<button @click="submitBtn()">确定</button>
			</view>
		</view>
		<selectType v-if="selectTypeShow" @updateValue="handleUpdate" :scanResult="scanResult"></selectType>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive
	} from "vue";
	import {
		showToast
	} from "@/utils/toast";
	import {
		bindSn,
		shopLists
	} from "@/api/mine.js";
	import {
		txmRecognition
	} from "@/api/common.js";
	import {
		useStore
	} from "@/store";
	import {

		uploadImg
	} from "@/utils/upload";
	// import { scanCode } from '@dcloudio/uni-plus';
	/** store实例 */
	const store = useStore();
	onLoad((val) => {
		console.log("val888", val)
		getShopList();
	});
	onShow(() => {
		const pages = getCurrentPages();
		//绑定终端前需要绑定店铺和结算卡
		uni.$on('scanResult', function(data) {
			params.value.sn = data;
			console.log('监听到事件来自返回的参数：' + data);
			// TODO 下面执行刷新的方法
		})

	});
	let params = ref({
		sn: null,
		userId: store.userInfo.userId,

		lsMerchantNo: null,
		oemUserNo: 'BU100002'
	});
	let scanParmas = ref({
		image: null,

	});


	// 扫描条码内容
	let scanResult = ref("")
	let array = ref([]);
	let shopName = ref("请选择店铺")
	let submitBtn = () => {
		// uni.navigateTo({
		// 	url: "/pagesDetail/bindSn/snList/index"
		// })
		// return
		if (!params.value.lsMerchantNo) {
			showToast("请选择店铺");
			return;
		}
		if (!params.value.sn) {
			showToast("请输入sn号");
			return;
		}

		//绑定终端
		bindSn(params.value)
			.then((res) => {
				console.log("res=" + res)
				uni.navigateTo({
					url: "/pagesDetail/bindSn/snList/index"
				})

			})
			.catch((err) => {

			});
	}
	let handleUpdate = (val) => {
		console.log("val88", val)

	}
	// 扫描SN码
	let scanBtn = () => {

		uni.navigateTo({
			url: '/pagesDetail/bindSn/scanBar2/index'
		})
	}

	function uploadImage() {

		uploadImg()
			.then((res) => {

				console.log("res=" + res)
				scanParmas.value.image = res;
				// 识别银行卡
				return txmRecognition(scanParmas.value);
			})
			.then((res) => {
				console.log("res=" + JSON.stringify(res))

				params.value.sn = res;
			})
	}

	function getShopList() {
		console.log("store.currentMerchantInfomation.merchantId=" + store.currentMerchantInfomation.merchantId)
		shopLists(store.userInfo.userId, store.currentMerchantInfomation.merchantId).then((res) => {
			//未绑定显示unbind和bind

			array.value = res.unbind;
		});
	}

	function bindPickerChange(e) {
		// console.log("e=" + JSON.stringify(array._rawValue))
		params.value.lsMerchantNo = array._rawValue[e.detail.value].lsMerchantNo;
		shopName.value = array._rawValue[e.detail.value].merSubName;
	}
</script>
<style lang="scss" scoped>
	@import "./index.scss";
</style>
<style lang="scss">
	page {
		background-color: #FFF !important;
	}
</style>